<template>
  <div class="credit-life-container">
    <!-- 页面头部 -->
    <div class="header">
      <div class="logo">“沈誉通”信用生活综合系统</div>
      <div class="nav">
        <!-- <router-link to="/home">首页</router-link> -->
        <router-link to="/credit-life">信用生活</router-link>
        <router-link to="/credit-business">信用商业</router-link>
        <router-link to="/behavior">亲社会行为</router-link>
        <router-link to="/news">新闻资讯</router-link>
        <router-link to="/credit-management">信用管理</router-link>
      </div>
      <div class="user-menu" ref="userMenu">
        <div class="notification">
          <router-link to="/notice">
            <i class="el-icon-message"></i>
          </router-link>
        </div>
        <div class="avatar-box">
          <img
            :src="user.icon"
            class="avatar"
            alt="用户头像"
            @click.stop="toggleMenu"
          />
        </div>
        <div v-if="isMenuOpen" class="dropdown-menu">
          <div class="menu-item" @click="goToProfile">个人信息</div>
          <div class="menu-item" @click="logout">退出登录</div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 服务模块展示区 -->
      <div class="services-grid">
        <!-- 图书借阅服务 -->
        <div class="service-card" @click="navigateToService('/library-detail/1')">
          <div class="service-icon">
            <i class="el-icon-reading"></i>
          </div>
          <h3>图书借阅</h3>
          <p>信用借阅，便捷阅读</p>
        </div>

        <!-- 舒心就医服务 -->
        <div class="service-card" @click="navigateToService('/hospital-detail/1')">
          <div class="service-icon">
            <i class="el-icon-first-aid-kit"></i>
          </div>
          <h3>舒心就医</h3>
          <p>信用就医，便捷服务</p>
        </div>

        <!-- 便捷泊车服务 -->
        <div class="service-card" @click="navigateToService('/parking-detail/1')">
          <div class="service-icon">
            <i class="el-icon-location-information"></i>
          </div>
          <h3>便捷泊车</h3>
          <p>信用停车，智慧出行</p>
        </div>

        <!-- 公共交通服务 -->
        <div class="service-card" @click="navigateToService('/public-transportation-detail/1')">
          <div class="service-icon">
            <i class="el-icon-truck"></i>
          </div>
          <h3>公共交通</h3>
          <p>信用出行，绿色环保</p>
        </div>
      </div>

      <!-- 信用提示区域 -->
      <div class="credit-info">
        <div class="info-card">
          <h3>信用生活服务说明</h3>
          <ul>
            <li>所有服务需要实名认证后才能使用</li>
            <li>不同服务可能需要不同的信用分要求</li>
            <li>良好的使用记录将提升您的信用分</li>
            <li>请遵守各项服务的使用规则</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

// 注释掉拦截器
// axios.interceptors.request.use(
//   (config) => {
//     const token = window.sessionStorage.getItem('token');
//     if (token) config.headers.Authorization = `${token}`;
//     return config;
//   },
//   (error) => Promise.reject(error)
// );

// axios.interceptors.response.use(
//   (response) => response,
//   (error) => {
//     if (error.response?.status === 401) {
//       sessionStorage.removeItem('token');
//       location.href = '/login-code';
//     }
//     return Promise.reject(error);
//   }
// );

export default {
  name: 'CreditLife',
  data() {
    return {
      user: {},
      imageBaseUrl: 'http://localhost:8089',

      isMenuOpen: false
    };
  },
  created() {
    this.queryUser();
  },
  methods: {
    navigateToService(path) {
      this.$router.push(path);
    },
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
    },
    closeMenuOnClickOutside(event) {
      const menu = this.$refs.userMenu;
      if (menu && !menu.contains(event.target)) {
        this.isMenuOpen = false;
      }
    },
    goToProfile() {
      this.$router.push('/user-information');
      this.isMenuOpen = false;
    },
    logout() {
      axios.post('/user/logout')
        .then(() => {
          sessionStorage.removeItem('token');
          this.$router.push('/');
        })
        .catch(err => {
          console.error('Logout error:', err);
          this.$message.error('退出登录失败，请重试');
        });
    },
    queryUser() {
      axios.get('/users/user/me', {
        headers: { Authorization: `${localStorage.getItem('token')}` }
      }).then(({ data }) => {
        if (data.success && data.data) {
          this.user = data.data;
          if (this.user.icon && !this.user.icon.startsWith('http')) {
            this.user.icon = `${this.imageBaseUrl}${this.user.icon}`;
          }
          this.queryUserInfo();
        }
      });
    },
    queryUserInfo() {
      axios.get(`/users/user/basic`)
        .then(({ data }) => {
          this.info = data || { introduce: '' };
          sessionStorage.setItem('userInfo', JSON.stringify(data));
        })
        .catch(err => this.$message.error(err.message));
    },
  }
};
</script>

<style scoped>
.credit-life-container {
  min-height: 100vh;
  background: radial-gradient(ellipse at center, #001e3c 0%, #000 100%);
  color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
  background: #002d52;
}

.logo {
  font-size: 20px;
  color: #4fc3f7;
}

.nav {
  display: flex;
  gap: 20px;
}

.nav a {
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.nav a:hover {
  color: #4fc3f7;
}

.user-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.notification {
  margin-right: 10px;
}

.notification a {
  color: #fff;
  text-decoration: none;
}

.notification i {
  font-size: 24px;
  color: #4fc3f7;
}

.notification i:hover {
  color: #2196f3;
}

.avatar-box img.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #4fc3f7;
}

.dropdown-menu {
  position: absolute;
  top: 50px;
  right: 0;
  background: #002d52;
  border: 1px solid #4fc3f7;
  border-radius: 4px;
  width: 120px;
  z-index: 1000;
}

.menu-item {
  padding: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.menu-item:hover {
  background: #014b75;
}

.main-content {
  padding: 40px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.service-card {
  background: #13263a;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(79, 195, 247, 0.3);
}

.service-icon {
  font-size: 40px;
  color: #4fc3f7;
  margin-bottom: 20px;
}

.service-card h3 {
  color: #4fc3f7;
  margin-bottom: 10px;
  font-size: 20px;
}

.service-card p {
  color: #b0bec5;
  font-size: 14px;
}

.credit-info {
  background: #13263a;
  border-radius: 10px;
  padding: 30px;
  margin-top: 40px;
}

.info-card h3 {
  color: #4fc3f7;
  margin-bottom: 20px;
  font-size: 20px;
}

.info-card ul {
  list-style: none;
  padding: 0;
}

.info-card li {
  color: #b0bec5;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.info-card li::before {
  content: "•";
  color: #4fc3f7;
  position: absolute;
  left: 0;
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .main-content {
    padding: 20px;
  }
}
</style>
